/* eslint-disable */
import * as _ from "lodash";

class RulerOverlay {
  constructor(viewer, pixelsPerMeter) {
    this._viewer = viewer;
    // console.log(viewer)
    this._containerWidth = 0;
    this._containerHeight = 0;
    this.pixelsPerMeter = pixelsPerMeter;
    this._canvasdiv = document.createElement("div");
    this._canvasdiv.style.position = "relative";
    this._canvasdiv.style.left = 0;
    this._canvasdiv.style.top = 0;
    this._canvasdiv.style.width = "100%";
    this._canvasdiv.style.height = "100%"; //.canvas appendChild
    this._viewer.canvas.appendChild(this._canvasdiv);
    this._canvas = document.createElement("canvas");
    this._canvas.setAttribute("id", "ruler-overlay");
    this._canvas.style.position = "absolute";
    this._canvas.style.transform = "rotate(0deg)";
    this._canvasdiv.appendChild(this._canvas);
    this.changeHeight = document.getElementsByClassName("tool-container el-row")[0] === undefined ? 0 : document.getElementsByClassName("tool-container el-row")[0].clientHeight;
    //计算屏幕大小
    this.resize();
    var that = this;
    //监听屏幕大小重新计算大小
    window.onresize = function () {
      that.resize()
    }
  }

  //画刻度尺的具体方法
  reDrawRuler(realMargin, currentMargin, hasRuler, pixelPoint) {
    const context = this._canvas.getContext("2d");
    // 画之前清空画布
    context.clearRect(0, 0, this._containerWidth, this._containerHeight);

    //画刻度尺
    if (hasRuler.ruler) {
      //画背景
      context.beginPath();
      context.rect(0, 0, this._viewer.container.clientWidth, 22);
      context.rect(0, 0, 32, this._viewer.container.clientHeight);
      context.strokeStyle = "#ffffff";//边框颜色
      context.fillStyle = "#ffffff";//白色背景
      context.fill();
      context.stroke();

      var config = {
        width: 600,
        height: 200,

        // 刻度尺相关
        size: 600, // 刻度尺总刻度数
        x: pixelPoint.x, // 刻度尺x坐标位置
        y: pixelPoint.y - this.changeHeight, // 刻度尺y坐标位置
        w: realMargin / 10, // 刻度线的间隔
        h: 10, // 刻度线基础长度

        // 事件相关
        mousedown: false,
        start: [],
      };
      var size = (config.size || 100) * 10 + 1;
      var x = config.x || 0;
      var y = config.y || 0;
      var w = config.w || 5;
      var h = config.h || 10;
      var offset = 3; // 上面数字的偏移量
      // 设置画笔属性
      context.strokeStyle = "#000000";//边框颜色
      context.fillStyle = "#000000";//填充颜色/字体颜色
      context.lineWidth = 1;
      context.font = 12;
      //小于0 从左向右绘制
      for (var i = 0; i <= size * 1 / 4; i++) {
        // 开始一条路径
        context.beginPath();
        // 移动到指定位置
        var xData = x + i * w * -1;
        context.moveTo(xData, 0);
        // 满10刻度时刻度线长一些 并且在上方表明刻度
        if (i % 10 == 0) {
          context.fillText(
            (i / 10) * currentMargin * -1,
            xData + offset,
            h * 2
          );
          context.lineTo(xData, h * 2.2);
        } else {
          // 满5刻度时的刻度线略长于1刻度的
          context.lineTo(xData, (i % 5 === 0 ? 1.5 : 1) * h);
        }
        // 画出路径
        context.stroke();
      }
      //大于0 从右往左绘制
      for (var i = 0; i <= size * 3 / 4; i++) {
        // 开始一条路径
        context.beginPath();
        // 移动到指定位置
        var xData = x + i * w;
        context.moveTo(xData, 0);
        // 满10刻度时刻度线长一些 并且在上方表明刻度
        if (i % 10 == 0) {
          context.fillText(
            (i / 10) * currentMargin,
            xData + offset,
            h * 2
          );
          context.lineTo(xData, h * 2.2);
        } else {
          // 满5刻度时的刻度线略长于1刻度的
          context.lineTo(xData, (i % 5 === 0 ? 1.5 : 1) * h);
        }
        // 画出路径
        context.stroke();
      }
      //小于0 从向往上绘制
      for (var i = 0; i <= size * 1 / 4; i++) {
        // 开始一条路径
        context.beginPath();
        // 移动到指定位置
        var ydata = y + i * w * -1;
        context.moveTo(0, ydata);
        // 满10刻度时刻度线长一些 并且在上方表明刻度
        if (i % 10 == 0) {
          // 计算偏移量
          context.fillText(
            (i / 10) * currentMargin * -1,
            h,
            ydata - offset
          );
          context.lineTo(h * 3.2, ydata);
        } else {
          // 满5刻度时的刻度线略长于1刻度的
          context.lineTo(h * (i % 5 === 0 ? 1.5 : 1), ydata);
        }
        // 画出路径
        context.stroke();
      }

      //大于0 从上往下绘制
      for (var i = 0; i <= size * 3 / 4; i++) {
        // 开始一条路径
        context.beginPath();
        // 移动到指定位置
        var ydata = y + i * w;
        context.moveTo(0, ydata);
        // 满10刻度时刻度线长一些 并且在上方表明刻度
        if (i % 10 == 0) {
          // 计算偏移量
          context.fillText(
            (i / 10) * currentMargin,
            h,
            ydata - offset
          );
          context.lineTo(h * 3.2, ydata);
        } else {
          // 满5刻度时的刻度线略长于1刻度的
          context.lineTo(h * (i % 5 === 0 ? 1.5 : 1), ydata);
        }
        // 画出路径
        context.stroke();
      }
    }
    //画比例尺
    if (hasRuler.scaleRuler) {
      context.beginPath();
      context.strokeStyle = "#656565";//边框颜色
      context.fillStyle = "#000000";//填充颜色/字体颜色
      context.lineWidth = 2;
      var x = this._viewer.container.clientWidth * 0.05;
      var y = this._viewer.container.clientHeight * 0.925;
      context.moveTo(x, y);
      context.lineTo(x, y + 20);
      context.lineTo(x + realMargin, y + 20);
      var textData = parseInt((currentMargin / this.pixelsPerMeter) * 1000000);
      context.fillText(textData, x + realMargin - 5, y + 33);
      context.lineTo(x + realMargin, y);
      context.lineTo(x + realMargin, y + 20);
      context.fillText(
        textData * 2 + ' μm',
        x + 2 * realMargin - 5,
        y + 33
      );
      context.lineTo(x + 2 * realMargin, y + 20);
      context.lineTo(x + 2 * realMargin, y);
      context.stroke();
    }
  }
  resize() {
    if (this._containerWidth !== this._viewer.container.clientWidth) {
      this._containerWidth = this._viewer.container.clientWidth;
      this._canvasdiv.setAttribute("width", this._containerWidth);
      this._canvas.setAttribute("width", this._containerWidth);
    }
    if (this._containerHeight !== this._viewer.container.clientHeight) {
      this._containerHeight = this._viewer.container.clientHeight;
      this._canvasdiv.setAttribute("height", this._containerHeight);
      this._canvas.setAttribute("height", this._containerHeight);
    }
  }
}

export default class Measuring {
  constructor(paper, viewer, pixelsPerMeter) {
    this.paper = paper;
    this.viewer = viewer;
    this.overlay = viewer.paperjsOverlay();
    this.pixelsPerMeter = pixelsPerMeter,
      this.lines = [];
    this.rulerItem = [];
    this.rulerOverlay = new RulerOverlay(this.viewer, this.pixelsPerMeter);
    this.realMargin = 1; //realMargin 显示的margin
    this.currentMargin = 1600; //实际的长度
    this.minCellWidth = 48.0;
    this.maxCellWidth = 156.0;
    this.pixelPoint = {
      x: 0, y: 50
    }//像素坐标
    this.hasGrid = true;
    this.hasRuler = {
      ruler: true,
      scaleRuler: true,
    };
    this.rulerHeight = 20;

    this.baseStrokeWidth = 0.6;
    this.isFirst = true
    this.zoom = -1;
    this.minX = 0;
    this.minY = 0;
    this.maxX = 0;
    this.maxY = 0;
  }
  //主要方法入口 里面有刻度尺 网格线
  reDraw(zoom, rotate) {
    this.realMargin = this.__getViewDistance(this.currentMargin, rotate);
    // console.log(this.realMargin)
    if (this.realMargin > this.maxCellWidth) {
      this.currentMargin /= 2;
      return this.reDraw(zoom, 0);
    } else if (this.realMargin < this.minCellWidth) {
      this.currentMargin *= 2;
      return this.reDraw(zoom, 0);
    }
    // 首先需要计算出屏幕的四至
    if (this.viewer.source) {
      const dimensions = this.viewer.source.dimensions;
      const minX = _.min([0, this.paper.view.bounds.x]);
      const minY = _.min([0, this.paper.view.bounds.y]);
      const maxX = _.max([dimensions.x, this.paper.view.bounds.bottomRight.x]);
      const maxY = _.max([dimensions.y, this.paper.view.bounds.bottomRight.y]);
      if (this.hasGrid) {
        this.__reDrawGrid(minX, minY, maxX, maxY, rotate);
      }
      //计算0，0 的像素点位置
      // console.log(this.isFirst)
      // this.isFirst = true

      // if (!this.isFirst) {
      //   this.viewcenter = this.viewer.viewport.getCenter(true)
      //   this.isFirst = true
      // }
      this.viewcenter = this.viewer.viewport.getCenter(true)
      this.pixelPoint = this.viewer.viewport.imageToWindowCoordinates(this.viewcenter, true);
      this.rulerOverlay.reDrawRuler(
        this.realMargin,
        this.currentMargin,
        this.hasRuler,
        this.pixelPoint
      );
      this.minX = minX;
      this.minY = minY;
      this.maxX = maxX;
      this.maxY = maxY;
      this.zoom = zoom;
      return this;
    }
  }
  //画网格线的具体方法
  __reDrawGrid(minX, minY, maxX, maxY, rotate) {
    this.lines.forEach(function (line) {
      line.remove();
    });
    this.lines = [];
    var baseStrokeWidth = this.__getProjectDistance(this.baseStrokeWidth, rotate);
    //画0以上的部分
    //paper.js 需要通过真实距离去画
    //canvas 需要显示距离去画

    for (let i = 0; i <= maxX; i += this.currentMargin) {
      const from = new this.paper.Point(i, minY);
      const to = new this.paper.Point(i, maxY);
      const path = new this.paper.Path.Line(from, to);
      path.strokeColor = "grey";
      path.strokeWidth = baseStrokeWidth;
      this.lines.push(path);
    }
    for (let i = 0; i <= maxY; i += this.currentMargin) {
      const from = new this.paper.Point(minX, i);
      const to = new this.paper.Point(maxX, i);
      const path = new this.paper.Path.Line(from, to);
      path.strokeColor = "grey";
      path.strokeWidth = baseStrokeWidth;
      this.lines.push(path);
    }
    // //画0以下的部分
    if (minX < 0) {
      for (let i = 0; i >= minX; i -= this.currentMargin) {
        const from = new this.paper.Point(i, minY);
        const to = new this.paper.Point(i, maxY);
        const path = new this.paper.Path.Line(from, to);
        path.strokeColor = "grey";
        path.strokeWidth = baseStrokeWidth;
        this.lines.push(path);
      }
    }
    if (minY < 0) {
      for (let i = 0; i >= minY; i -= this.currentMargin) {
        const from = new this.paper.Point(minX, i);
        const to = new this.paper.Point(maxX, i);

        const path = new this.paper.Path.Line(from, to);
        path.strokeColor = "grey";
        path.strokeWidth = baseStrokeWidth;

        this.lines.push(path);
      }
    }
  }
  // 使用切片的真实尺寸计算显示屏上的尺寸
  __getViewDistance(distance, rotate) {
    if (rotate === 90 || rotate === -270) {
      return (
        this.paper.view.projectToView(new this.paper.Point(distance, 0)).y -
        this.paper.view.projectToView(new this.paper.Point(0, 0)).y
      );
    } else if (rotate === 180 || rotate === -180) {
      return (
        this.paper.view.projectToView(new this.paper.Point(0, 0)).y -
        this.paper.view.projectToView(new this.paper.Point(0, distance)).y
      );
    } else if (rotate === 270 || rotate === -90) {
      return (
        this.paper.view.projectToView(new this.paper.Point(0, 0)).y -
        this.paper.view.projectToView(new this.paper.Point(distance, 0)).y
      );
    } else {

      return (
        this.paper.view.projectToView(new this.paper.Point(0, distance)).y -
        this.paper.view.projectToView(new this.paper.Point(0, 0)).y
      );
    }
  }

  // 使用显示屏上的尺寸计算切片的真实尺寸
  __getProjectDistance(distance, rotate) {
    if (rotate === 90 || rotate === -270) {
      return (
        this.paper.view.viewToProject(new this.paper.Point(0, 0)).y -
        this.paper.view.viewToProject(new this.paper.Point(distance, 0)).y
      );
    } else if (rotate === 180 || rotate === -180) {
      return (
        this.paper.view.viewToProject(new this.paper.Point(0, 0)).y -
        this.paper.view.viewToProject(new this.paper.Point(0, distance)).y
      );
    } else if (rotate === 270 || rotate === -90) {
      return (
        this.paper.view.viewToProject(new this.paper.Point(distance, 0)).y -
        this.paper.view.viewToProject(new this.paper.Point(0, 0)).y
      );
    } else {
      return (
        this.paper.view.viewToProject(new this.paper.Point(0, distance)).y -
        this.paper.view.viewToProject(new this.paper.Point(0, 0)).y
      );
    }
  }
  //删除网格线
  lineRemove() {
    this.lines.forEach(function (line) {
      line.remove();
    });
    this.lines = [];
  }
  //判断是否绘制网格线 
  judmentGrid(isGrid) {
    if (isGrid) {
      this.hasGrid = true;
    } else {
      this.hasGrid = false;
    }
  }
  //判断是否绘制刻度尺和比例尺
  judmentRuler(isRuler, isScaleRuler) {
    //刻度尺
    if (isRuler) {
      this.hasRuler.ruler = true;
    } else {
      this.hasRuler.ruler = false;
    }
    //比例尺
    if (isScaleRuler) {
      this.hasRuler.scaleRuler = true;
    } else {
      this.hasRuler.scaleRuler = false;
    }
    this.rulerOverlay.reDrawRuler(
      this.realMargin,
      this.currentMargin,
      this.hasRuler,
      this.pixelPoint
    );
  }
}
